<template>
  <el-container style="height: 100vh; overflow: hidden">
    <el-aside style="width: auto">
      <div class="tab_title">
        <i :style="!isCollapse ? 'margin-right: 12px' : 'margin-right: 0'">
          <img
            src="http://175.178.92.128:8087/campus_help_system/images/logo/logo.png"
            alt=""
            width="100%"
          />
        </i>
        <span v-show="!isCollapse">xxxx学院</span>
      </div>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="#0166b6"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-submenu :index="i + 1 + ''" v-for="(e, i) in tabUrl" :key="i">
          <template slot="title">
            <i :class="e.icon" style="color: #fff"></i>
            <span slot="title" style="color: #fff">
              {{ e.name }}
            </span>
          </template>
          <el-menu-item
            style="padding: 0 0 0 60px"
            :index="eA.url"
            v-for="(eA, iA) in e.samTab"
            :key="iA"
          >
            {{ eA.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="height: 82px">
        <div class="icon">
          <i @click="isCollapse = !isCollapse" class="el-icon-s-operation"></i>
          <span>快捷校园在线互助系统</span>
        </div>
        <span style="cursor: pointer" @click="$router.push('/')">预览网站</span>
        <!-- <el-card class="box-card"> </el-card> -->
      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      // 点击缩放菜单栏
      isCollapse: false,
      // 菜单路由
      tabUrl: [
        {
          name: "用户管理",
          icon: "el-icon-user",
          samTab: [
            {
              name: "用户列表",
              url: "/admin/user/list",
            },
          ],
        },
        {
          name: "校园资讯管理",
          icon: "el-icon-document",
          samTab: [
            {
              name: "校园资讯列表",
              url: "/admin/campus_information/list",
            },
            {
              name: "新增校园资讯",
              url: "/admin/campus_information/add/0",
            },
          ],
        },
        {
          name: "资源共享管理",
          icon: "el-icon-circle-close",

          samTab: [
            {
              name: "资源共享列表",
              url: "/admin/resource_sharing/list",
            },
            {
              name: "新增资源共享",
              url: "/admin/resource_sharing/add/0",
            },
          ],
        },
        {
          name: "互助物品管理",
          icon: "el-icon-monitor",
          samTab: [
            {
              name: "互助物品列表",
              url: "/admin/mutual_aid/list",
            },
            {
              name: "互助物品",
              url: "/admin/mutual_aid/add/0",
            },
          ],
        },
        {
          name: "失物招领管理",
          icon: "el-icon-food",
          samTab: [
            {
              name: "失物招领列表",
              url: "/admin/lost_and_found/list",
            },
            {
              name: "新增失物招领",
              url: "/admin/lost_and_found/add/0",
            },
          ],
        },
        {
          name: "帮啦信息管理",
          icon: "el-icon-food",
          samTab: [
            {
              name: "帮啦任务列表",
              url: "/admin/task_publishing/list",
            },
            {
              name: "帮啦任务发布",
              url: "/admin/task_publishing/add/0",
            },
          ],
        },
        {
          name: "留言管理",
          icon: "el-icon-food",
          samTab: [
            {
              name: "留言反馈列表",
              url: "/admin/message_feedback/list",
            },
          ],
        },
      ],
    };
  },
  created() {
    if (window.localStorage.getItem("role") != "管理员") {
      this.$message.error("请用管理员帐号登录登录");
      return this.$router.push("/admin/login");
    }
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
}
.el-header {
  height: 82px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-bottom: 1px solid #ebeef5;
  z-index: 2;
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      cursor: pointer;
      font-size: 42px;
      margin-right: 24px;
      color: #0166b6;
      &:hover {
        color: #1989fa;
      }
    }
    span {
      font-size: 22px;
      color: #0166b6;
      &:hover {
        color: #1989fa;
      }
    }
  }
}

.el-aside {
  height: 100vh;
  border-right: 1px solid #f8f8f8;
  overflow-y: scroll;
  position: relative;
  background-color: #0166b6;
  // border-right: solid 1px #e6e6e6;
  ul.el-menu-vertical-demo.el-menu {
    border-right: none;
  }
  &::-webkit-scrollbar {
    width: 2px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ebedf0;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #f8f8f8;
  }
}
.el-main {
  min-height: calc(100vh - 82px);
  background-color: #f0f2f5;
}
.tab_title {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 666;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-bottom: 1px solid #ebeef5;
  border-right: none;
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fff;
  & > i {
    display: inline-block;
    width: 48px;
  }
}
</style>
